<div style="position: relative;" class="dialog-mdsd-main">
    <h1 mat-dialog-title style="display:inline-block; cursor:move" mat-dialog-draggable>{{'dlg.layout-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <div class="dialog-mdsd-content">
        <mat-tab-group style="width: 950px;height: 700px">
            <mat-tab label="{{'dlg.layout-general' | translate}}">
                <div class="container-split-ver mt25">
                    <div>
                        <div class="my-form-field block">
                            <span>{{'dlg.layout-lbl-sview' | translate}}</span>
                            <mat-select [(value)]="data.layout.start" style="width: 400px">
                                <mat-option *ngFor="let view of data.views" [value]="view.id">
                                    {{ view.name }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field block mt10">
                            <span>{{'dlg.layout-lbl-login-start' | translate}}</span>
                            <mat-select [(value)]="data.layout.loginonstart" style="width: 400px">
                                <mat-option [value]="true">{{'general.enabled' | translate}}</mat-option>
                                <mat-option [value]="false">{{'general.disabled' | translate}}</mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field block mt10">
                            <span>{{'dlg.layout-lbl-zoom' | translate}}</span>
                            <mat-select [(value)]="data.layout.zoom" style="width: 400px">
                                <mat-option *ngFor="let type of zoomMode | enumToArray" [value]="type.key">
                                    {{ type.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field block mt10">
                            <span>{{'dlg.layout-input-dialog' | translate}}</span>
                            <mat-select [(value)]="data.layout.inputdialog" style="width: 400px">
                                <mat-option *ngFor="let type of inputMode | enumToArray" [value]="type.key">
                                    {{ type.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field block mt10">
                            <span>{{'dlg.layout-navigation-mode' | translate}}</span>
                            <mat-select [(value)]="data.layout.hidenavigation" style="width: 400px">
                                <mat-option *ngFor="let type of headerMode | enumToArray" [value]="type.key">
                                    {{ type.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field block mt10">
                            <span>{{'dlg.layout-connection-message' | translate}}</span>
                            <mat-select [(value)]="data.layout.show_connection_error" style="width: 400px">
                                <mat-option [value]="true">{{'general.enabled' | translate}}</mat-option>
                                <mat-option [value]="false">{{'general.disabled' | translate}}</mat-option>
                            </mat-select>
                        </div>      
                    </div>
                    <div>
                        <div style="display: inline-block;margin-left: 180px;">
                            <button mat-icon-button style="color: rgba(255,255,255,1);background-color: rgba(68,138,255, 1);">
                                <mat-icon>menu</mat-icon>
                            </button>
                        </div>
                        <div class="my-form-field" style="display: inline-block;margin-left: 30px;">
                            <span>{{'dlg.layout-show-dev' | translate}}</span>
                            <mat-slide-toggle color="primary" [(ngModel)]="data.layout.showdev"></mat-slide-toggle>
                        </div>
                    </div>
                </div>
            </mat-tab>
            <mat-tab label="{{'dlg.layout-navigation' | translate}}" *ngIf="data.layout.hidenavigation !== 'true'">
                <div style="display: inline-block;margin-top: 10px;width:100%; min-height: 500px; overflow-y: auto; height: 650px">
                    <div [style.background-color]="data.layout.header.bkcolor" [style.color]="data.layout.header.fgcolor">
                        <button mat-icon-button>
                            <mat-icon aria-label="Menu">menu</mat-icon>
                        </button>
                        <div style="display: inline-block;padding-left: 140px">
                            <button mat-icon-button (click)="onAddMenuItem(null)">
                                <mat-icon aria-label="Add">control_point</mat-icon>
                            </button>
                        </div>
                    </div>
                    <div class="sidenav-menu" [style.background-color]="data.layout.navigation.bkcolor" [style.color]="data.layout.navigation.fgcolor"
                        style="height: calc(100% - 50px);" [ngClass]="'sidenav-menu-' + data.layout.navigation.type">
                        <mat-list class="dndList" style="padding-top: 10px; background-color: inherit;">
                            <mat-list-item style="display: flex; justify-content: center; height: 35px; font-weight: bold; padding-bottom: 10px;margin-bottom: 10px; width: unset" [style.color]="data.layout.navigation.fgcolor">
                                <span *ngIf="!data.layout.navigation.logo; else hasLogo">{{'sidenav.title' | translate}}</span>
                                <ng-template #hasLogo><img src="{{data.layout.navigation.logo}}" style="max-width: 100%; max-height: 100%;"></ng-template>
                            </mat-list-item>
                            <mat-list-item *ngFor="let item of draggableListLeft; let i = index" [ngClass]="'menu-item-' + data.layout.navigation.type" style="width: unset">
                                <button type="button" mat-button class="sidenav-btn" [style.color]="data.layout.navigation.fgcolor" [ngSwitch]="data.layout.navigation.type">
                                    <div *ngSwitchCase="'icon'" class="menu-item-content-icon">
                                        <img *ngIf="item.image" src="{{item.image}}">
                                        <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
                                    </div>
                                    <div *ngSwitchCase="'text'" class="menu-item-content-text">
                                        <span>{{item.text}}</span>
                                    </div>
                                    <div *ngSwitchCase="'block'" class="menu-item-content-block">
                                        <img *ngIf="item.image" src="{{item.image}}">
                                        <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
                                        <span>{{item.text}}</span>
                                    </div>
                                    <div *ngSwitchCase="'inline'" class="menu-item-content-inline">
                                        <img *ngIf="item.image" src="{{item.image}}">
                                        <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>                                        
                                        <span style="display: inline-block">{{item.text}}</span>
                                    </div>
                                </button>
                                <div style="padding-left:15px;padding-top: 3px;display: block;width: 50px;">
                                    <mat-icon (click)="onMoveMenuItem(i, 'top')" class="layout-menu-item-icon" style="display: block;">arrow_upward</mat-icon>
                                    <mat-icon (click)="onMoveMenuItem(i, 'bottom')" class="layout-menu-item-icon" style="display: block;">arrow_downward</mat-icon>
                                </div>
                                <div style="padding-left:15px;">
                                    <div style="display: block;width: 50px;">
                                        <mat-icon (click)="onAddMenuItem(item)" class="layout-menu-item-icon layout-menu-item-edit">edit</mat-icon>
                                        <mat-icon (click)="onRemoveMenuItem(i, item)" class="layout-menu-item-icon layout-menu-item-delete">clear</mat-icon>
                                    </div>
                                    <div class="layout-menu-item-link">{{getViewName(item)}}</div>
                                </div>
                            </mat-list-item>
                        </mat-list>
                    </div>
                    <div style="top: 70px; right: 25px;position: absolute;">
                        <div class="my-form-field" style="display: block;">
                            <span>{{'dlg.layout-lbl-smode' | translate}}</span>
                            <mat-select [(value)]="data.layout.navigation.mode" style="width: 300px">
                                <mat-option *ngFor="let mode of navMode | enumToArray" [value]="mode.key">
                                    {{ mode.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field" style="display: block; margin-top: 10px">
                            <span>{{'dlg.layout-lbl-type' | translate}}</span>
                            <mat-select [(value)]="data.layout.navigation.type" style="width: 300px">
                                <mat-option *ngFor="let type of navType | enumToArray" [value]="type.key">
                                    {{ type.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div style="display: block; margin-top: 10px">
                            <div class="my-form-field" style="display: inline-block">
                                <span>{{'dlg.layout-nav-bkcolor' | translate}}</span>
                                <input [(colorPicker)]="data.layout.navigation.bkcolor" [style.background]="data.layout.navigation.bkcolor" [cpAlphaChannel]="'always'"
                                    class="input-color" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width:126px;" [cpPosition]="'bottom'" />
                            </div>
                            <div class="my-form-field" style="float:right">
                                <span>{{'dlg.layout-nav-fgcolor' | translate}}</span>
                                <input [(colorPicker)]="data.layout.navigation.fgcolor" [style.background]="data.layout.navigation.fgcolor" [cpAlphaChannel]="'always'"
                                    class="input-color" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width:126px;" [cpPosition]="'bottom'" />
                            </div>
                        </div>
                        <div class="my-form-field" style="display: inline-block;margin-top: 10px;">
                            <span>{{'dlg.layout-lbl-logo' | translate}}</span>
                            <mat-select [(value)]="data.layout.navigation.logo" style="width: 300px">
                                <mat-option (click)="data.layout.navigation.logo = null;"></mat-option>
                                <mat-option *ngFor="let resource of resources" [value]="resource.path">
                                    {{ resource.name }}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div>
                </div>
            </mat-tab>
            <mat-tab label="{{'dlg.layout-header' | translate}}" *ngIf="data.layout.hidenavigation !== 'true'">
                <div style="overflow-y: hidden; overflow-x: hidden; margin-top: 10px; min-height: 500px;">
                    <div class="header-layout" [style.background-color]="data.layout.header.bkcolor" [style.color]="data.layout.header.fgcolor">
                        <div class="header-menu">
                            <button mat-icon-button>
                                <mat-icon aria-label="Menu">menu</mat-icon>
                            </button>
                        </div>
                        <div class="header-title">
                            {{data.layout.header.title}}
                        </div>
                        <div *ngIf="data.securityEnabled" class="header-login">
                            <button mat-icon-button>
                                <mat-icon aria-label="Login">account_circle</mat-icon>
                            </button>
                        </div>
                        <div class="header-button">
                            <button mat-icon-button class="alarm-layout">
                                <mat-icon aria-label="Alarms">notifications_none</mat-icon>
                            </button>
                            <button mat-icon-button class="info-layout">
                                <mat-icon aria-label="Info">error_outline</mat-icon>
                            </button>
                        </div>
                    </div>
                    <div class="header-config">
                        <div class="config">
                            <div class="my-form-field" style="width: 300px">
                                <span>{{'dlg.layout-lbl-title' | translate}}</span>
                                <input [(ngModel)]="data.layout.header.title" type="text" style="width:293px">
                            </div>
                            <div style="display: block; margin-top: 20px;width: 300px">
                                <div class="my-form-field" style="display: inline-block">
                                    <span>{{'dlg.layout-header-bkcolor' | translate}}</span>
                                    <input [(colorPicker)]="data.layout.header.bkcolor" [style.background]="data.layout.header.bkcolor" [cpAlphaChannel]="'always'"
                                        class="input-color" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'"
                                        style="width:126px;" [cpPosition]="'bottom'" />
                                </div>
                                <div class="my-form-field" style="float: right;">
                                    <span>{{'dlg.layout-header-fgcolor' | translate}}</span>
                                    <input [(colorPicker)]="data.layout.header.fgcolor" [style.background]="data.layout.header.fgcolor" [cpAlphaChannel]="'always'"
                                        class="input-color" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'"
                                        style="width:126px;" [cpPosition]="'bottom'" />
                                </div>
                            </div>
                        </div>
                        <div class="config">
                            <div class="my-form-field">
                                <span>{{'dlg.layout-lbl-alarms' | translate}}</span>
                                <mat-select [(value)]="data.layout.header.alarms" style="width: 260px">
                                    <mat-option *ngFor="let mode of notifyMode | enumToArray" [value]="mode.key">
                                        {{ mode.value }}
                                    </mat-option>
                                </mat-select>
                                <mat-icon aria-label="Alarms">notifications_none</mat-icon>
                            </div>
                            <div class="my-form-field" style="margin-top: 20px;">
                                <span>{{'dlg.layout-lbl-infos' | translate}}</span>
                                <mat-select [(value)]="data.layout.header.infos" style="width: 260px">
                                    <mat-option *ngFor="let mode of notifyMode | enumToArray" [value]="mode.key">
                                        {{ mode.value }}
                                    </mat-option>
                                </mat-select>
                                <mat-icon aria-label="Info">error_outline</mat-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button [mat-dialog-close]="">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>